import React from 'react'
import PropTypes from 'prop-types'
import {routerRedux} from 'dva/router'
import {connect} from 'dva'
import {message, Tabs} from 'antd'
import {Page} from 'components'
import queryString from 'query-string'
import List from './components/List'
import {HighQualityModal} from 'components/WeChat'
import {WxChatModal} from "components/WeChat"
import {findList} from "services/message"

const {TabPane} = Tabs


const HighQualityChatRecord = ({
                                 employee, location, message: wxMessage, dispatch, highQualityChatRecord, loading,
                               }) => {

  const {query, pathname} = location
  const {list, pagination} = highQualityChatRecord
  const {
    departments,
    roles,
    modalVisible,
    currentItem,
    list: empList,
    pagination: empPage,
    selectedRowKeys,
    selectedRows,
  } = employee

  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['highQualityChatRecord/query'],
    pagination: false,
    location,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
    onDeleteItem (id) {
      dispatch({
        type: 'highQualityChatRecord/delete',
        payload: {id: id},
      })
        .then(() => {
          handleRefresh({
            current: (list.length === 1 && pagination.current > 1) ? pagination.current - 1 : pagination.current,
          })
          message.success("删除成功")
        })
    },
    showWxChatModal (data) {
      console.log(data)
      // const {
      //   customerWxId,
      //   operator: {wxId, icon: oicon, nickname, remark},
      //   customer: {icon: cicon, friendNickname, friendRemark},
      //   chatTime,
      //   isRecommand,
      // } = data
      //
      // dispatch({
      //   type: 'message/findList',
      //   payload: {
      //     current: 1,
      //     size: 10,
      //     cwxId: customerWxId,
      //     owxId: wxId,
      //     chatTime,
      //   },
      // })
      // dispatch({
      //   type: 'message/showModal',
      //   payload: {
      //     recommended: isRecommand,
      //     contactNickname: friendNickname,
      //     ownerNickname: nickname,
      //     ownerAvatarUrl: oicon,
      //     contactAvatarUrl: cicon,
      //     cwxId: customerWxId,
      //     owxId: wxId,
      //     chatTime: chatTime,//
      //   }
      // })
    },
    onEditItem (item) {
      const viewerList = item.viewerList ? item.viewerList : []
      dispatch({
        type: 'employee/query',
        payload: {
          current: 1,
          size: 10,
        }
      })
      dispatch({
        type: 'employee/updateState',
        payload: {
          modalVisible: true,
          currentItem: item,
          selectedRowKeys: viewerList.map(_ => _.id),
          selectedRows: viewerList,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'highQualityChatRecord/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
    },
  }

  const modalProps = {
    visible: modalVisible,
    title: '优质聊天记录',
    list: empList,
    departments,
    roles,
    currentItem,
    pagination: empPage,
    onChange (page) {
      dispatch({
        type: "employee/query",
        payload: {
          current: page.current,
          size: page.pageSize,
        },
      })
    },
    handleSearch (data) {
      if (data) {
        dispatch({
          type: "employee/query",
          payload: {
            ...data,
            current: 1,
            size: 10,
          },
        })
      } else {
        dispatch({
          type: "employee/query",
        })
      }
    },
    handleCancel () {
      dispatch({
        type: "employee/updateState",
        payload: {
          modalVisible: false,
          selectedRowKeys: [],
          selectedRows: [],
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys, selectedRows) => {
        dispatch({
          type: 'employee/updateState',
          payload: {
            selectedRowKeys: keys,
            selectedRows: selectedRows,
          },
        })
      },
    },
    handleOk (description, hid) {
      let data = {
        highQualityChatRecord: {
          id: hid,
          description,
          personalChatRecords: {
            id: currentItem.personalChatRecords.id,
          },
        },
      }

      data.viewerId = selectedRows.map(item => Number(item.id))
      if (selectedRows.length <= 0) {
        message.warn("请至少选择一位员工查看权限")
        return
      }
      dispatch({
        type: 'highQualityChatRecord/create',
        payload: data,
      }).then(() => {
        dispatch({type:'highQualityChatRecord/query'})
        dispatch({
          type: "employee/updateState",
          payload: {
            modalVisible: false,
            selectedRowKeys: [],
            selectedRows: [],
            currentItem: {},
          },
        })
      })
    },
  }

  return (
    <Page inner>
      <Tabs>
        <TabPane tab={'优质聊天记录'}>
          <List {...listProps} />
        </TabPane>
      </Tabs>
      {modalVisible && <HighQualityModal {...modalProps}/>}
      {wxMessage['modalVisible'] && <WxChatModal titleVisible={true}/>}
    </Page>
  )
}

HighQualityChatRecord.propTypes = {
  highQualityChatRecord: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({highQualityChatRecord, message, employee, loading}) => ({
  highQualityChatRecord,
  message,
  employee,
  loading,
}))(HighQualityChatRecord)
